<template>
    <el-dialog class="mydialog" top="2vh" :close-on-click-modal="false" :before-close="close"  title="" :visible.sync="show" append-to-body>
     <el-backtop target=".mydialog" :bottom="100"></el-backtop>
      <el-skeleton   :rows="15" :loading="loading" animated>
      <div class="pdf-views">
          <pdf
            v-for="(i,index) in numPages"
            :key="index+'_'+random"
            :src="pdfSrc"
            :page="i"
            @num-pages="pageCount = $event"
          >
          </pdf>
      </div>
      </el-skeleton>
      <div class="pdf-right-buttons">
        <div>
          <el-button type="danger" @click="close" circle icon="el-icon-close"></el-button>
        </div>
        <div>
          <el-button :disabled="!url" v-downLoad="url"  circle icon="el-icon-download"></el-button>
        </div>
          <el-button  :disabled="!url"  @click="toPrint" circle icon="el-icon-printer"></el-button>
      </div>
      <div class="pdf-bottom-buttons" v-if="canModify">
         <el-tooltip class="item" effect="dark" content="重新生成合同需要重新确认" placement="top">
           <el-button type="warning" element-loading-text="合同生成中..." :loading="loading" @click.native="confirmreGenerateFile">重新生成合同</el-button>
         </el-tooltip>
        <el-button type="success" element-loading-text="合同确认中..."  :loading="confirmLoading" @click.native="confirmFile" :disabled="confirmBtnDisabled">{{confirmBtnText}}</el-button>
      </div>
  </el-dialog>
</template>

<script>
import pdf from 'vue-pdf'
import downLoad from '@/directive/down-load-url'
import Mixins from '../../mixins'
export default {
  props: {
    canModify: {type: Boolean, default: true},
    visible: Boolean,
    param: {type: Object,
      default: () => {
        return {
          url: ''
        }
      }}
  },
  directives: {downLoad},
  mixins: [Mixins],
  components: {pdf},
  watch: {
    visible: {
      handler (val) {
        this.show = val
      },
      immediate: true
    },
    param: {
      handler (val) {
        if (val && Object.keys(val).length > 0) {
          this.contractFileInfo = val
          this.confirmBtnDisabled = val.isConfirmFile || false
          this.confirmBtnText = val.isConfirmFile && val.isConfirmFile === true ? '合同已确认' : '合同确认'
          if (val.fileLocalUrl && val.fileLocalUrl !== null && val.fileLocalUrl.indexOf('http') >= 0) {
            this.url = val.fileLocalUrl
          } else {
            this.generateFile()
          }
        }
      },
      immediate: true,
      deep: true
    },
    contractFileInfo: {
      handler (val) {
        this.$emit('update:param', val)
      },
      deep: true
    },
    url: {
      handler (val, old) {
        if (val && val !== old) {
          this.getPdfData(val)
        }
      }
    }
  },
  data () {
    return {
      loading: false,
      confirmLoading: false,
      show: false,
      confirmBtnDisabled: false,
      confirmBtnText: '合同确认',
      contractFileInfo: {},
      url: '',
      pdfSrc: '',
      numPages: 1,
      pageCount: 0,
      random: 0
    }
  },
  methods: {
    close () {
      this.show = false
      this.$emit('update:visible', false)
    },
    generateFile () {
      const contractFileCode = this.contractFileInfo.contractFileCode
      this.loading = true
      this.requestOption('generateContractFile', contractFileCode, res => {
        if (res.code === 0) {
          this.contractFileInfo.fileLocalUrl = res.data.url
          this.contractFileInfo.isConfirmFile = false
        } else {
          this.loading = false
        }
      }, () => {
        this.loading = false
      })
    },
    confirmreGenerateFile () {
      this.$msgBox.confirm('您确定需要重新生成合同吗？如果内容有误，可删除合同重新添加合同文件', () => {
        this.generateFile()
      })
    },
    toPrint () {
      if (!this.url) {
        this.$msgBox.error('文件地址不存在')
        return
      }
      const aElement = document.createElement('a')
      aElement.href = this.url
      aElement.target = '_blank'
      document.body.appendChild(aElement)
      aElement.click()
    },
    confirmFile () {
      this.$msgBox.confirm('确认您已仔细阅读合同文件内容', () => {
        this.confirmLoading = true
        const contractCode = this.contractFileInfo.contractCode
        const contractFileCode = this.contractFileInfo.contractFileCode
        if (!contractCode || !contractFileCode) {
          this.$msgBox.error('合同编号不存在')
          return
        }
        const params = {contractCode}
        params.contractFileCodeList = [contractFileCode]
        this.requestOption('initiateConfirmContractFile', params, res => {
          this.confirmLoading = false
          if (res.code === 0) {
            this.contractFileInfo.isConfirmFile = true
          }
        }, () => {
          this.confirmLoading = false
        })
      })
    },
    getPdfData (url) {
      if (url) {
        this.loading = true
        this.pdfSrc = pdf.createLoadingTask(url)
        this.pdfSrc.promise.then(res => {
          this.loading = false
          this.numPages = res.numPages
          this.random = Math.random()
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf-right-buttons{
    position:fixed;
    top: 20px;
    right: 40px;
    display: flex;
    flex-direction: column;
    div{
      margin-bottom: 10px;
    }
}
.pdf-bottom-buttons{
  position: fixed;
  width: 100%;
  bottom: 20px;
  right: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
